<template>
    <van-popup
        v-model="monthShow"
        round
        position="bottom"
        @open="handleOpen"
        @close="handleClose"
        :style="{ height: '325px' }"
    >
        <p class="month-calendar-title">{{ monthTitle }}</p>
        <div class="month-calendar-content" ref="monthContent">
            <div ref="monthBody" class="month-calendar-body">
                <template v-for="item in list">
                    <p class="month-calendar-subtit" :key="item.value">{{ item.name }}</p>
                    <div v-for="mon in item.month" :key="mon.value" class="month-calendar-list" :class="{'margin-t-0': mon.monVal == '01' || mon.monVal == '02' || mon.monVal == '03' || mon.monVal == '04', 'month-calendar-active': mon.value == monthDate}" @click="handleMonth(mon.value)">
                        <span>{{ mon.name }}</span>
                    </div>
                </template>
            </div>
        </div>
        <slot></slot>
    </van-popup>
</template>

<script>
import moment from 'moment'

export default {
    props: {
        show: {
            type: Boolean,
            deafult: () => {
                return false
            }
        },
        minDate: {
            type: String,
            default: '2019-01-01'
        },
        maxDate: {
            type: Date,
            default: new Date()
        },
        defaultDate: {
            type: Date,
            default: new Date()
        }
    },
    data () {
        return {
            monthShow: false,
            isFirst: true,
            list: [],
            monthTitle: '',
            monthDate: moment().format('YYYY-MM')
        }
    },
    mounted () {
        this.init()
    },
    methods: {
        /* 初始化 */
        init () {
            // this.$toast(moment().format('YYYY/MM'))
            this.monthTitle = moment(this.defaultDate).format('YYYY年MM月')
            this.monthDate = moment(this.defaultDate).format('YYYY-MM')
            // this.$toast(moment(this.minDate).format('YYYY/MM'))
            let year = this.getMonthList(this.minDate, this.maxDate)
            // this.$toast(year[0])
            this.list = year.map(item => {
                return {
                    name: item + ' 年',
                    value: item,
                    month: [
                        { name: '一月', value: item + '-01', monVal: '01' },
                        { name: '二月', value: item + '-02', monVal: '02' },
                        { name: '三月', value: item + '-03', monVal: '03' },
                        { name: '四月', value: item + '-04', monVal: '04' },
                        { name: '五月', value: item + '-05', monVal: '05' },
                        { name: '六月', value: item + '-06', monVal: '06' },
                        { name: '七月', value: item + '-07', monVal: '07' },
                        { name: '八月', value: item + '-08', monVal: '08' },
                        { name: '九月', value: item + '-09', monVal: '09' },
                        { name: '十月', value: item + '-10', monVal: '10' },
                        { name: '十一月', value: item + '-11', monVal: '11' },
                        { name: '十二月', value: item + '-12', monVal: '12' }
                    ]
                }
            })
            // this.$toast(this.list[0].month[0].value)
            // console.log('list', this.list)
        },

        /* 选择月份 */
        handleMonth (val) {
            // this.$toast(val)
            // this.$toast(moment(this.minDate).toDate().getTime())
            // this.$toast(moment(val).format('YYYY-MM'))
            // this.$toast(moment(this.maxDate).toDate().getTime())
            if (moment(this.minDate).toDate().getTime() <= moment(val).toDate().getTime() && moment(val).toDate().getTime() <= moment(this.maxDate).toDate().getTime()) {
                this.monthDate = moment(val).format('YYYY-MM')
                this.monthTitle = moment(val).format('YYYY年MM月')
                // this.$toast(this.monthDate)
                this.$emit('select', new Date(val))
            }
        },

        /* 获取时间段内所以月份 */
        getMonthList (start, end) {
            const endTimeStemp = moment(moment(end).format('YYYY-01-01 00:00:00')).toDate().getTime()
            let list = [moment(start).format('YYYY')]
            let i = 1
            while (new Date(list[list.length - 1]).getTime() < endTimeStemp) {
                list.push(moment(start).add(i, 'year').format('YYYY'))
                i++
            }
            return list
        },

        /* 关闭弹出层 */
        handleClose () {
            this.$emit('close')
        },

        /* 打开弹出层 */
        handleOpen () {
            this.scrollToBottom()
        },

        /* 滚动到底部 */
        scrollToBottom () {
            this.$nextTick(() => {
                if (this.isFirst) {
                    this.$refs.monthContent.scrollTop = this.$refs.monthBody.scrollHeight
                    this.isFirst = false
                }
            })
        }
    },
    watch: {
        show: function (newVal, oldVal) {
            this.monthShow = newVal
        }
    }
}
</script>

<style lang="less" scoped>
.month-calendar-title {
    height: 14px;
    line-height: 14px;
    margin: 0;
    padding: 22px 30px 9px;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
}
.month-calendar-content {
    width: 100%;
    height: 184px;
    padding: 0 20px;
    box-sizing: border-box;
    overflow-y: scroll;
    .month-calendar-body {
        display: flex;
        justify-content: flex-start;
        // align-items: center;
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .month-calendar-subtit {
        width: 100%;
        height: 44px;
        line-height: 44px;
        margin: 0;
        padding: 0;
        font-size: 14px;
        font-weight: 500;
        text-align: center;
    }
    .month-calendar-list {
        width: 25%;
        margin-top: 9px;
        span {
            width: 64px;
            height: 40px;
            line-height: 40px;
            margin: 0 auto;
            font-size: 14px;
            color: #9FA5B4;
            text-align: center;
            display: block;
        }
    }
    .margin-t-0 {
        margin-top: 0;
    }
    .month-calendar-active {
        span {
            color: #FFFFFF;
            // background: linear-gradient(136deg,#6BBFFC 6%, #00D5E3 90%);
            background-color: #1ECFEA;;
            border-radius: 20px;
        }
    }
}
</style>
